<script setup>
import { ref } from 'vue'
import { useRouter } from "vue-router"
const use = useRouter()

function back() {
    use.back()
} 
const loading = ref(false)
const currentDate = new Date().toDateString()
</script>
<template>
<el-space direction="vertical" alignment="flex-start" style="position: relative; left:20% ; ">
    <div>
    </div>
    <el-skeleton style="width: 240px" :loading="loading" animated>
    <template #template>
        <el-skeleton-item variant="image" style="width: 240px; height: 240px ;margin-top: 20px;" />
        <div style="padding: 14px">
        <el-skeleton-item variant="h3" style="width: 50%" />
        <div
            style="
            display: flex;
            align-items: center;
            justify-items: space-between;
            margin-top: 16px;
            height: 16px;
            "
        >
            <el-skeleton-item variant="text" style="margin-right: 16px" />
            <el-skeleton-item variant="text" style="width: 30%" />
        </div>
        </div>
    </template>
    <template #default>
        <el-card :body-style="{ padding: '0px', marginBottom: '1px' }" style="position: absolute; top:10vh">
        <img
            src="/hive.png"
            class="image"
        />
        <div style="padding: 14px">
            <span>没有新的通知...</span>
            <div class="bottom card-header">
            <div class="time">{{ currentDate }}</div>
            <el-button text @click="back()">返回主页面</el-button>
            </div>
        </div>
        </el-card>
    </template>
    </el-skeleton>
  </el-space>
</template>

<style>
</style>